<template>
  <div class="about-page">
    <el-container>
      <el-main>
        <div class="about-content">
          <!-- 页面标题 -->
          <div class="page-header">
            <h1>关于视频解析平台</h1>
            <p class="subtitle">现代化的视频数据爬取和解析服务</p>
          </div>

          <!-- 项目简介 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><InfoFilled /></el-icon>
                <span>项目简介</span>
              </div>
            </template>
            
            <p>
              这是一个基于 <strong>Vue 3 + Python FastAPI + Spring Boot</strong> 架构的现代化视频平台数据爬取和下载服务。
              项目采用微服务架构设计，提供了友好的 Web 界面和强大的 RESTful API。
            </p>
            
            <div class="features">
              <h3>✨ 核心功能</h3>
              <ul>
                <li>🎯 多平台视频解析（抖音、TikTok、哔哩哔哩）</li>
                <li>🚀 批量处理和高效爬取</li>
                <li>📱 响应式设计，支持移动端访问</li>
                <li>🔒 安全稳定的API接口</li>
                <li>📊 实时数据统计和监控</li>
                <li>🌐 现代化的用户界面</li>
              </ul>
            </div>
          </el-card>

          <!-- 技术架构 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Setting /></el-icon>
                <span>技术架构</span>
              </div>
            </template>
            
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="tech-item">
                  <h4>🎨 前端服务</h4>
                  <ul>
                    <li>Vue 3 + TypeScript</li>
                    <li>Element Plus UI</li>
                    <li>Vite 构建工具</li>
                    <li>Pinia 状态管理</li>
                  </ul>
                </div>
              </el-col>
              
              <el-col :span="8">
                <div class="tech-item">
                  <h4>🐍 Python服务</h4>
                  <ul>
                    <li>FastAPI 框架</li>
                    <li>异步处理</li>
                    <li>智能爬虫引擎</li>
                    <li>数据解析与清洗</li>
                  </ul>
                </div>
              </el-col>
              
              <el-col :span="8">
                <div class="tech-item">
                  <h4>☕ Java服务</h4>
                  <ul>
                    <li>Spring Boot</li>
                    <li>配置管理中心</li>
                    <li>服务协调</li>
                    <li>系统监控</li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <!-- 支持平台 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><span>🌐</span></el-icon>
                <span>支持平台</span>
              </div>
            </template>
            
            <el-row :gutter="20" class="platform-list">
              <el-col :span="8">
                <div class="platform-item">
                  <el-tag type="danger" size="large">抖音</el-tag>
                  <p>支持视频、图集解析和下载</p>
                </div>
              </el-col>
              
              <el-col :span="8">
                <div class="platform-item">
                  <el-tag type="warning" size="large">TikTok</el-tag>
                  <p>全球短视频平台数据获取</p>
                </div>
              </el-col>
              
              <el-col :span="8">
                <div class="platform-item">
                  <el-tag type="primary" size="large">哔哩哔哩</el-tag>
                  <p>视频信息和弹幕数据提取</p>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <!-- 版本信息 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><span>📋</span></el-icon>
                <span>版本信息</span>
              </div>
            </template>
            
            <el-descriptions :column="2" border>
              <el-descriptions-item label="当前版本">
                v1.0.0
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">
                2025-08-12
              </el-descriptions-item>
              <el-descriptions-item label="架构模式">
                微服务架构
              </el-descriptions-item>
              <el-descriptions-item label="开发状态">
                <el-tag type="success">稳定运行</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>

          <!-- 联系信息 -->
          <el-card class="info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Message /></el-icon>
                <span>使用说明</span>
              </div>
            </template>
            
            <div class="usage-info">
              <el-alert
                title="免责声明"
                type="warning"
                description="本项目仅用于学习和研究目的。使用时请遵守相关平台的服务条款和robots.txt规则，不得用于商业用途或违法行为。"
                :closable="false"
                show-icon
              />
              
              <div class="quick-links">
                <h4>📚 快速链接</h4>
                <el-space>
                  <el-button type="primary" @click="goHome">
                    <el-icon><HomeFilled /></el-icon>
                    返回首页
                  </el-button>
                  
                  <el-button @click="openDocs">
                    <el-icon><Document /></el-icon>
                    查看文档
                  </el-button>
                  
                  <el-button @click="openAPI">
                    <el-icon><Link /></el-icon>
                    API文档
                  </el-button>
                </el-space>
              </div>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  InfoFilled,
  Setting,
  Message,
  HomeFilled,
  Document,
  Link
} from '@element-plus/icons-vue'

const router = useRouter()

// 导航方法
const goHome = () => {
  router.push('/')
}

const openDocs = () => {
  // 可以链接到文档页面或外部文档
  window.open('/', '_blank')
}

const openAPI = () => {
  // 打开API文档
  window.open('http://localhost:8000/docs', '_blank')
}
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px 0;
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  color: white;
}

.page-header h1 {
  font-size: 3rem;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtitle {
  font-size: 1.2rem;
  margin: 10px 0 0 0;
  opacity: 0.9;
}

.info-card {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.features h3 {
  color: #409eff;
  margin: 20px 0 10px 0;
}

.features ul {
  list-style: none;
  padding: 0;
}

.features li {
  padding: 5px 0;
  color: #606266;
}

.tech-item {
  text-align: center;
  padding: 20px;
}

.tech-item h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

.tech-item ul {
  list-style: none;
  padding: 0;
}

.tech-item li {
  padding: 3px 0;
  color: #606266;
}

.platform-list {
  margin-top: 20px;
}

.platform-item {
  text-align: center;
  padding: 20px;
}

.platform-item .el-tag {
  margin-bottom: 10px;
}

.platform-item p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.usage-info {
  padding: 20px 0;
}

.quick-links {
  margin-top: 30px;
}

.quick-links h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .about-content {
    padding: 0 15px;
  }
  
  .el-row {
    --el-row-gutter: 10px;
  }
  
  .tech-item,
  .platform-item {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.8rem;
  }
  
  .info-card {
    margin-bottom: 20px;
  }
}
</style>